<template>
  <div class="project4">
    <cheader :pageIndex="3"></cheader>
    <!-- <img src="./banner.png" alt="" class="banner"> -->
    <div class="jdBg">
      <img src="@/common/img/bg.png" alt="" class="bg">
      <img src="./banner.png" alt="" class="title">
    </div>
    <div class="people">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“躬先表率”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">优秀共产党员</div>
        </div>
      </div>
      <div class="s1" ref="s1Wrap">
        <div class="s1Content" ref="s1Content">
          <ul>
            <li v-for="item in peopleArr" :key="item.id" :data-did='item.id' @click="goToDetail(3, 0, item.id)" :style="{backgroundImage: 'url('+ item.cover +')'}">
              <!-- <h1>{{item.title}}</h1> -->
            </li>
          </ul>
        </div>
      </div>
      <button class="btn" v-if="peopleArr.length" @click="goToList(3, 0, 41)">查看更多</button>
    </div>
    <div class="doctor">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“医者仁心”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">照片集锦</div>
        </div>
      </div>
      <div class="s2" ref="s2Wrap">
        <div class="s2Content" ref="s2Content">
          <ul>
            <li v-for="item in doctorArr" :key="item.id" :data-did='item.id' @click="goToDetail(3, 0, item.id)" :style="{backgroundImage: 'url('+ item.cover +')'}">
              <div class="cover">
                <h2>{{item.title.length>6?item.title.substring(0, 6)+'...' : item.title}}</h2>
              </div>
            </li>
          </ul>
          <button v-if="doctorArr.length" @click="goToList(3, 1, 42, '')">查看更多</button>
        </div>
      </div>
    </div>
    <div class="production">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“心得感悟”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">手稿集锦</div>
        </div>
      </div>
      <div class="s3" ref="s3Wrap">
        <div class="s3Content" ref="s3Content">
          <ul>
            <li v-for="item in productionArr" :key="item.id" :data-did='item.id' @click="goToList(3, 0, 43, item.id)" :style="{backgroundImage: 'url('+ item.cover +')'}">
              <div class="cover">
                <h2>{{item.title.length>6?item.title.substring(0, 6)+'...' : item.title}}</h2>
              </div>
            </li>
          </ul>
          <button v-if="productionArr.length" @click="goToList(3, 1, 42, '')">查看更多</button>
        </div>
      </div>
    </div>
    <div class="mv">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball2.png" alt="" class="img2">
            <h2>“感动你我”</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
          <div class="b">专题短片</div>
        </div>
      </div>
      <ul>
        <li v-for="item in mvArr" :key="item.id" :data-did='item.id' @click="goToDetail(3, 3, item.id)">
          <div class="t" :style="{backgroundImage: 'url('+ item.cover +')'}">
            <div class="cover"></div>
            <div class="info">
              <font-awesome-icon :icon="['fas', 'video']" class="icon"/>
              <span>{{item.durtime}}</span>
            </div>
          </div>
          <div class="b">
            <h2>{{item.title.length>9?item.title.substring(0, 9)+'...' : item.title}}</h2>
          </div>
        </li>
      </ul>
      <button v-if="mvArr" @click="goToList(3, 3, 44)">查看更多</button>
    </div>
    <cfooter></cfooter>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
import cfooter from '@/components/cfooter/cfooter'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import api from '@/common/js/api'
import '@/common/css/swiper.min.css'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      bg: require('@/common/img/bg.png'),
      show: false,
      swiper1Option: {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        // autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(3, 0, did)
          }
        }
      },
      swiper2Option: {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 10,
        loop: true,
        on: {
          click: (e) => {
            this.doctorCoe = e.target.dataset.swiperSlideIndex
            this.change()
          }
        }
      },
      swiper3Option: {
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToList(3, 0, 43, did)
          }
        }
      },
      swiper4Option: {
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        // autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(3, 3, did)
          }
        }
      },
      peopleArr: [],
      doctorArr: [],
      doctorCoe: 0,
      productionArr: [],
      mvArr: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
    })
    api.project4Index().then(res => {
      if (res.data.result === '0') {
        this.peopleArr = res.data.data.person
        this.doctorArr = res.data.data.photos
        this.productionArr = res.data.data.scripts
        this.mvArr = res.data.data.movies
      }
    }).then(() => {
      this._initScroll()
    })
  },
  computed: {
  },
  methods: {
    _initScroll () {
      let peopleArr = this.peopleArr
      let doctorArr = this.doctorArr
      let productionArr = this.productionArr
      if (peopleArr.length) {
        let long = peopleArr.length * 200 + 100 + 'px'
        this.$refs.s1Content.style.width = long
        this.scroll = new BScroll(this.$refs.s1Wrap, {
          scrollX: true,
          scrollY: false,
          click: true,
          tap: true,
          eventPassthrough: 'vertical',
          bounce: false
        })
      }
      if (doctorArr.length) {
        let long = doctorArr.length * 130 + 150 + 'px'
        this.$refs.s2Content.style.width = long
        this.scroll = new BScroll(this.$refs.s2Wrap, {
          scrollX: true,
          scrollY: false,
          click: true,
          tap: true,
          eventPassthrough: 'vertical',
          bounce: false
        })
      }
      if (productionArr.length) {
        let long = productionArr.length * 130 + 100 + 'px'
        this.$refs.s3Content.style.width = long
        this.scroll = new BScroll(this.$refs.s3Wrap, {
          scrollX: true,
          scrollY: false,
          click: true,
          tap: true,
          eventPassthrough: 'vertical',
          bounce: false
        })
      }
    },
    change () {
      this.$refs.showBlc.classList.add('a')
      setTimeout(() => {
        this.$refs.showBlc.classList.remove('a')
      }, 500)
    },
    // 去专题列表页 (专题几，第几个模块, 后端参数type, 后端参数id)
    goToList (project, blc, postType, postId) {
      this.$router.push({
        name: 'projectList',
        query: {
          project: project,
          blc: blc,
          postType: postType,
          postId: postId
        }
      })
    },
    // 去文章详情页 (专题几，第几个模块, 后端参数id, 后端参数id)
    goToDetail (project, blc, did) {
      this.$router.push({
        name: 'projectDetail',
        query: {
          project: project,
          blc: blc,
          did: did
        }
      })
    }
  },
  components: {
    cheader,
    cfooter,
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
  $projectGreen: #2e9a9a;
  .project4 {
    background: no-repeat top center $projectGreen;
    .jdBg {
      width: 100%;
      height: 245px;
      // background: green;
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
      .bg {
        width: 375px;
        height: 229px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -187px;
      }
      .title {
        width: 375px;
        height: 245px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -187px;
      }
    }
    .c-btn {
      height: 26px;
      line-height: 23px;
      padding: 0 26px;
      background-color: #006e6e;
      border: 2px solid #fff;
      border-radius: 40px;
      color: #fff;
      cursor: pointer;
      display: block;
      margin: 0 auto;
    }
    .c-titleWrap {
      text-align: center;
      .c-title {
        display: inline-block;
        margin-bottom: 15px;
        .t {
          height: 25px;
          line-height: 25px;
          padding: 0 27px;
          position: relative;
          margin-bottom: 15px;
          .img1 {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 0;
            left: 10px;
          }
          .img2 {
            width: 12px;
            height: 12px;
            position: absolute;
            bottom: -5px;
            right: 26px;
          }
          h2 {
            font-size: 17px;
            color: #fff;
            font-weight: bold;
            position: relative;
            margin-left: -15px;
            top: 5px;
          }
          span {
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: #ffe75f;
            position: absolute;
            bottom: 0px;
            &.l {
              left: 0;
            }
            &.r {
              right: 13px;
            }
          }
        }
        .b {
          font-size: 14px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .people {
      overflow: hidden;
      min-height: 376px;
      margin-bottom: 25px;
      .s1 {
        margin-bottom: 10px;
        ul {
          padding-left: 25px;
          li {
            display: inline-block;
            vertical-align: top;
            width: 200px;
            height: 267px;
            background: center no-repeat;
            background-size: cover;
            margin-right: 10px;
          }
        }
      }
      .btn {
        width: 325px;
        height: 30px;
        border: 1px solid #fff;
        border-radius: 5px;
        margin: 0 auto;
        background-color: #2aa5a5;
        color: #fff;
        display: block;
      }
    }
    .doctor {
      overflow: hidden;
      margin-bottom: 25px;
      min-height: 139px;
      .s2 {
        ul {
          padding-left: 25px;
          display: inline-block;
          li {
            display: inline-block;
            vertical-align: top;
            width: 130px;
            height: 70px;
            margin-right: 10px;
            background: center no-repeat;
            background-size: cover;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            .cover {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 35px;
              background-image: linear-gradient(transparent, rgba(#000, .8));
              h2 {
                color: #fff;
                font-size: 14px;
                margin-top: 15px;
                margin-left: 10px;
              }
            }
          }
        }
        button {
          padding: 0;
          display: inline-block;
          vertical-align: top;
          width: 25px;
          height: 70px;
          box-sizing: border-box;
          border: 1px solid #fff;
          border-radius: 5px;
          background-color: #2aa5a5;
          font-size: 12px;
          color: #fff;
          line-height: 13px;
          text-align: center;
        }
      }
    }
    .production {
      min-height: 164px;
      overflow: hidden;
      margin-bottom: 25px;
      .s3 {
        ul {
          padding-left: 25px;
          display: inline-block;
          li {
            display: inline-block;
            vertical-align: top;
            width: 130px;
            height: 95px;
            margin-right: 10px;
            background: center no-repeat;
            background-size: cover;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            .cover {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 48px;
              background-image: linear-gradient(transparent, rgba(#000, .8));
              h2 {
                color: #fff;
                font-size: 14px;
                margin-top: 26px;
                margin-left: 10px;
              }
            }
          }
        }
      }
      button {
        padding: 0;
        display: inline-block;
        vertical-align: top;
        width: 25px;
        height: 95px;
        box-sizing: border-box;
        border: 1px solid #fff;
        border-radius: 5px;
        background-color: #2aa5a5;
        font-size: 12px;
        color: #fff;
        line-height: 13px;
        text-align: center;
      }
    }
    .mv {
      margin-bottom: 22px;
      min-height: 359px;
      .p1-title {
        margin-bottom: 15px;
      }
      ul {
        width: 325px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto;
        li {
          width: 158px;
          height: 120px;
          // background-color: green;
          border-radius: 5px;
          overflow: hidden;
          margin-bottom: 10px;
          box-shadow: 0 0 5px #333;
          .t {
            width: 158px;
            height: 100px;
            background: center no-repeat;
            background-size: cover;
            position: relative;
            .cover {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-image: linear-gradient(transparent, rgba(#000, .7));
            }
            .info {
              width: 100%;
              position: absolute;
              bottom: 8px;
              // background-color: green;
              display: flex;
              justify-content: space-between;
              .icon {
                margin-left: 10px;
                color: #fff;
                font-size: 12px;
              }
              span {
                margin-right: 8px;
                color: #fff;
                font-size: 12px;
              }
            }
          }
          .b {
            height: 20px;
            line-height: 20px;
            background-color: #7dd6d6;
            h2 {
              color: #095146;
              font-size: 12px;
              font-weight: bolder;
              text-align: center;
            }
          }
        }
      }
      button {
        display: block;
        width: 325px;
        height: 33px;
        line-height: 33px;
        border-radius: 5px;
        background-color: #2aa5a5;
        margin: 0 auto;
        border: 1px solid #fff;
        color: #fff;
      }
    }
  }
  .a {
    animation: a 0.5s;
  }

  @keyframes a {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
